<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>Extension Sidebar Dashboard</title>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="assets/css/style.css"/>
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="stylesheet" href="../../thirdparty/fontawesome/css/all.min.css">
    <script src="assets/js/phoenix.js"></script>
    <script src="assets/js/new-github-project.js"></script>
    <script src="assets/js/new-git-project.js"></script>
    <style>
        #messageDisplay span {
            width: 100%;
        }
    </style>
</head>
<body id="top" onload="init(); initGitProject();">
<div class="code-editor-card d-flex flex-column">
    <div class="project-top d-flex align-items-center justify-content-between">
        <div class="editor-left d-flex align-items-center">
            <a href="code-editor.html" class="back-btn">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11V13ZM5 12L4.29289 11.2929C3.90237 11.6834 3.90237 12.3166 4.29289 12.7071L5 12ZM11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071C13.0976 19.3166 13.0976 18.6834 12.7071 18.2929L11.2929 19.7071ZM12.7071 5.70711C13.0976 5.31658 13.0976 4.68342 12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289L12.7071 5.70711ZM19 11H5V13H19V11ZM12.7071 18.2929L5.70711 11.2929L4.29289 12.7071L11.2929 19.7071L12.7071 18.2929ZM5.70711 12.7071L12.7071 5.70711L11.2929 4.29289L4.29289 11.2929L5.70711 12.7071Z"
                          fill="white"/>
                </svg>

            </a>
            <div class="project-title localize">
                {{NEW_PROJECT_FROM_GIT}}
            </div>
        </div>
        <div class="editor-right">
            <button class="close-btn" id="closeDialogueButton">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.1616 5.70972L5.70996 16.1613" stroke="white" stroke-width="2" stroke-linecap="round"
                          stroke-linejoin="round"/>
                    <path d="M5.70996 5.70972L16.1616 16.1613" stroke="white" stroke-width="2" stroke-linecap="round"
                          stroke-linejoin="round"/>
                </svg>

            </button>
        </div>
    </div>

    <div class="website-main-content">
        <div class="website-detail d-flex align-items-center">
            <span class="label-clone"></span>
            <input id="websiteURLInput" class="w-100" type="text" name="web-url" value="" spellcheck="false" autocomplete="off"/>
        </div>
        <div id="projectLocation" class="website-detail d-flex align-items-center">
            <span class="localize">{{LOCATION}}</span>
            <input id="locationInput" class="w-100" style="text-wrap: inherit;" type="button" name="web-url" value="">
        </div>
        <div class="website-detail d-flex align-items-center">
            <span></span>
            <span id="messageDisplay" class="w-100"></span>
        </div>

    </div>
    <div class="project-bottom d-flex flex-row-reverse">
        <button id="createProjectBtn" class="create-btn localize" style="width: 30%">{{CREATE_PROJECT}}</button>
    </div>
</div>

<!-- Javascript -->
<script src="assets/thirdparty/jquery.min.js"></script>
<script src="assets/thirdparty/Popper.js"></script>
<script src="assets/thirdparty/bootstrap.min.js"></script>
<script src="assets/thirdparty/jquery.easing.min.js"></script>
<script src="assets/thirdparty/main.js"></script>
<script src="assets/thirdparty/perfect-scrollbar.jquery.min.js"></script>
<!-- Appear js -->
<script src="assets/thirdparty/appear.min.js"></script>
</body>
</html>
